<template>
    <div>
        <div class="filterdiv">
            <div><label class="titlefont">隐患类型</label></div>
        </div>
        <div class="filterdiv-chose">
            <span  class="filterspan-chose"   v-for='(hiditem,index,) in hiditems'  :key='index' v-on:click="addClassFun(index)" v-bind:class='{selected:index==hiditemindex}'>{{hiditem.hiditem}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
      hiditemindexclear:{
          type: Number,
          default:0
      }
    },
    data() {
      return {
        data: [] ,
        hiditems: [
            {hiditem: "安全隐患"},
            {hiditem: "机电隐患"},
            {hiditem: "质量隐患"},
        ],
        hiditemindex:-1,
        dangertype:"",
//初始化数据
      }
    },
    methods: {
            addClassFun(index) {
                if(this.hiditemindex == index){
                    this.hiditemindex = -1;
                    this.$emit('setDangertypey',"");
                    return;
                }
                this.hiditemindex = index;
                this.dangertype=this.hiditems[index].hiditem;
                this.$emit('setDangertypey', this.dangertype);
            },
            getData(callback, failed) {
                var params = '{"_method":"component.getListData","_param":{"bizObj":"HAZARD_MANAGEMENT","service":"selectMore","fields":"*","filter":"1=1","currentPageIndex":' + this.page +',"pageSize":5,"orderList":[{"field":"INPUTDATE","order":"desc"}],"QueryFormData":""}}';
                this.$ajax({
                    method: 'post',
                    url: this.COMMON_URL+'?_objName=HAZARD_MANAGEMENT&_viewId=Hazard_Management_list2&_t=770662&_winid=w7986',
                    data: {
                    FixJSON: params
                    }
                }).then((res) => {
                    console.log(res)
                    callback(res)
                }).catch(err => {
                    failed()
                })
            },
            infinite(done) {//上划加载方法
                console.log("infinite");
                console.log(this.page);
                if(this.loading) {
                    done();//TODO 啥意思
                } else {
                    this.getData((res) => {
                        //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
                        if (res.status == '200' && res.data.datas.length > 0) {
                            this.list = [...this.list, ...res.data.datas]//TODO 啥意思
                            this.page++;
                            done();
                        } else {
                        done(true)//有错误的情况或者没有记录，传参true
                        }
                    }, () => {
                        done(true)
                    });
                }
            },
            refresh(done) {
                this.page = 1;
                console.log("refresh");
                console.log(this.page);
                this.loading = true;
                this.getData((res) => {
                    if (res.status == '200' && res.data.datas.length > 0) {
                    this.list = [...res.data.datas];
                    this.page++;
                    //done()
                    } else {
                    done(true);
                    }
                    this.loading = false;
                }, () => {
                    done(true);
                });
            },
    },
    watch: {
        hiditemindexclear:{
             handler(newVal) {
                 this.hiditemindex=this.hiditemindexclear;
             }
        }
    }
}
</script>

<style>
.filterdiv{
      padding: 20px;
      padding-bottom: 10px
  }

  .titlefont{
      color:#9F9F9F;
      font-size: 13px;
  }

  .filterdiv-chose{
      padding: 20px;
      padding-top: 0px;
      padding-bottom: 0px;
  }
  .filterspan-chose{
      font-size: 13px;
      display: inline-block;
      width: 25%;
      height:18px;
      background-color: #F5F5F5;
      text-align: center;
      margin: 5px;
      border-radius: 4px;
      padding: 3px;
      border: 2px solid  #F5F5F5;
  }
  .selected{
      border: 2px solid  #3C82F6
  }
</style>
